<template>
	<div class="content-box">
		<form @submit="userInfoLogin">
			<div style="display: flex; margin-top: 260rpx">
				<button class="avatar" :style="{
            marginBottom: '50rpx',
            flexShrink: '0',
            height: '200rpx',
            width: '200rpx',
            background: 'url(' + avatarUrl + ') center',
            backgroundSize: '100% 100%',
          }" open-type="chooseAvatar" @chooseavatar="onChooseAvatar"></button>
				<!-- <div class="img-box">
					<img :src="imgUrl" alt="">
				</div> -->
			</div>
			<div style="display: flex; justify-content: center; align-items: center">
				<input style="
            border: 1px solid #ccc;
            border-radius: 3px;
            padding: 20rpx;
            width: 100%;
          " name="nickname" type="nickname" class="calculate-input" placeholder="请输入昵称" :value="nickName" />
			</div>
			<!-- <div style="
          display: flex;
          justify-content: center;
          align-items: center;
          margin-top: 20rpx;
        ">
				<u-input placeholder="请获取手机号" border="surround" readonly :value="phone">
					<template slot="suffix">
						<u-button type="primary" v-if="!phone" open-type="getPhoneNumber"
							@getphonenumber="getphonenumber" size="mini">获取手机号</u-button>
					</template>
				</u-input>
			</div> -->
			<button style="
          color: #fff;
          position: fixed;
          bottom: 100rpx;
          left: 50%;
          width: 90%;
          transform: translateX(-50%);
          background-color: #216be6;
          border-radius: 30rpx;
        " form-type="submit">
				保存
			</button>
		</form>
		<u-toast ref="uToast"></u-toast>
	</div>
</template>
<script>
	import {
		saveWeUser,
		selectPhoneNumberByCode
	} from "@/api/axios/Login.js";
	import baseUrl from "@/api/axios/baseUrl.js";
	export default {
		data() {
			return {
				imgUrl: "",
				nickName: "",
				baseURL: this.staticURL,
				phone: "",
				code: "",
				openId: "",
				avatarUrl: this.staticURL + "/static/center/zwtx.png",
				weAvatar: ""
			};
		},
		onShow() {
			uni.hideHomeButton();
		},
		methods: {
			userInfoLogin(e) {
				this.nickName = e.detail.value.nickname;
				console.log(this.nickName);
				if (this.avatarUrl === this.staticURL + "/static/error.png") {
					this.$refs.uToast.show({
						type: "default",
						title: "",
						message: "请上传头像",
						iconUrl: "https://cdn.uviewui.com/uview/demo/toast/default.png",
					});
					return false;
				} else if (!this.nickName) {
					this.$refs.uToast.show({
						type: "default",
						title: "",
						message: "请输入昵称",
						iconUrl: "https://cdn.uviewui.com/uview/demo/toast/default.png",
					});
					return false;
				}

				uni.setStorageSync("avatarUrl", baseUrl.url + this.weAvatar);
				uni.setStorageSync("nickName", this.nickName);
				uni.setStorageSync("phone", this.phone);
				let openId = uni.getStorageSync("openId");
				this.openId = openId;
				saveWeUser({
					appId: "wx0d8d7d9403b86d0c",
					openId: openId,
					code: this.code,
					wePhone: this.phone,
					weUserName: this.nickName,
					weAvatar: this.weAvatar,
				}).then((res) => {
					uni.redirectTo({
						url: "/pages/Main/index",
					});
				});
			},
			onChooseAvatar(e) {
				console.log(e.detail.avatarUrl, ' e.detail.avatarUrl');
				let _this = this
				try {
					uni.uploadFile({
						url: baseUrl.url + "/xihefile/user/file/upload",
						filePath: e.detail.avatarUrl,
						name: "file",
						formData: {},
						success: (uploadFileRes) => {
							console.log(uploadFileRes)
							let url = JSON.parse(uploadFileRes.data).data;
							_this.avatarUrl = e.detail.avatarUrl;
							setTimeout(() => {
								_this.weAvatar = url;
							})
						},
					});
					// uni.setStorageSync('avatarUrl', e.detail.avatarUrl);
					// uni.setStorageSync('avatarUrl', e.detail.avatarUrl);
				} catch (e) {}
			},
		},
		onLoad() {
			this.nickName = '大麦' + Math.round(Math.random() * 1000000)
		}
	};
</script>
<style lang="scss" scoped>
	.content-box {
		background-color: #fff;
		min-height: 100vh;
		padding: 40rpx;
	}

	.img-box {
		width: 400rpx;
		height: 400rpx;
		border-radius: 20rpx;
		border: 1px solid #ccc;
		margin: 0 auto;
		margin-bottom: 20rpx;

		img {
			width: 100%;
			height: 100%;
			border-radius: 20rpx;
		}
	}
</style>